/**
 * Tags轮播图
 * @author SPY
 * @date 2020/02/01
 */

import React from 'react';
import { Button, Icon } from 'antd';
import Swiper from 'swiper';
import styles from './Slider.less';
import 'swiper/css/swiper.css';

const list = [
    '2020开门红',
    '春节不打烊',
    '春节七天乐',
    '欢乐中国年',
    '全家团圆',
    '开工大吉',
    '瑞鼠迎春',
    '微信红包',
];

class SliderButtonPage extends React.Component {

    componentDidMount() {
        const swiper = new Swiper('.swiper-container1', {
            slidesPerView: 6,
            spaceBetween: 30,
            slidesPerGroup: 6,
            loop: true,
            loopFillGroupWithBlank: true,
            setWrapperSize: true,
            navigation: {
                nextEl: '#nextButton',
                prevEl: '#prevButton',
            },
        });
    }



    render() {
        const style = {
            padding: '8px 0',
            fontSize: '13px',
        };

        return (
            <div className={styles.swiperFather}>
                <div className="swiper-container1"  style={{ overflow:'hidden' }}>
                    <div className="swiper-wrapper">
                        {
                            list.map((name, index) => {
                                return <Button className="swiper-slide" key={index} style={style}>{name}</Button>
                            })
                        }

                    </div>
                </div>
                <div className={styles.next} id='nextButton'>
                    <Icon type="right" style={{ fontSize: '16px' }} />
                </div>
                <div className={styles.prev} id='prevButton'>
                    <Icon type="left" style={{ fontSize: '16px' }} />
                </div>
            </div>
        );
    }
}

export default SliderButtonPage;